@import '../../../../assets/less/variable';
.fullScreen{
  position: fixed;
  height: 100%;
  overflow: auto;
  outline: 0;
  z-index:10000;
  top:0;
  left:0;
  right:0;
  bottom: 0;
  background-color: white;
 // background-color: rgba(55,55,55,.6);
 // background-color: rgba(255,255,255,.6);
  .container{
    height:100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    .header {
      height: 64px;
      flex: 0 0 64px;
      background-color: @body-background;
      box-shadow: @header-box-shadow;
      z-index: 3;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .logo {
        margin-left: 24px;
        i{
          font-size: 16px;
          cursor: pointer;
        }
        span{
          font-size: 21px;
          color: rgba(0,0,0,.54);
        }
      }
      .tools {
        margin-right: 24px;
        display: flex;
        flex-direction: row;
        li {
          padding: 0 10px;
          cursor: pointer;
          i {
            font-size: 14px;
          }
          span{
            margin-left: 12px;
            font-size: 12px;
          }
        }
      }
    }
    .body{
      flex:1;
      position: relative;
      min-height: 0;
      .sideMenu{
        width: 230px;
        height: 100%;
        max-height:100%;
        position: absolute;
        z-index: 1;
        top:0;
        overflow-y: auto;
        background-color: white;
        border-right:1px solid #e9e9e9;
        transition: all .3s;
        ul{
          overflow-x: hidden;
          margin-top: 20px;
          margin-bottom: 20px;
          border: none;
        }
      }
      .modalPanel{
        position: absolute;
        height:100%;
        width:100%;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: fade(@black, 50);
        z-index: 1;
      }
      .controlPanel {
        position: absolute;
        width:100%;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 2;
        transition: all .3s;
        .formPanel{
          max-height: 100%;
          background-color: @white;
          overflow-y: auto;
        }
      }
      .chartWrapper{
        display: flex;
        flex-direction: column;
        min-width: 0;
        margin-top: 6%;
        margin-left: 15%;
        width: 70%;
        height:80%;
        transition: all .3s;
      }
      .marginLeftDefault{
        padding-left: 0px;
      }
      .marginLeftMenu{
        padding-left: calc(~'240px - 15%');
      }
      .hide{
        left:-230px;
      }
      .show{
        left:0px;
      }
    }
  }
}
.displayNone{
  display: none;
}
.displayBlock{
  display: block;
}
.showModalPanel{
  top:0;
}
.hideModalPanel{
  top:-100px;
}

